import React, {lazy, Suspense} from 'react'
import {Route, Redirect, Switch,withRouter} from 'react-router-dom'
import Loading from './page/loading'
const Home = lazy(()=>import('./page/home'));
const Find = lazy(()=>import('./page/find'));
const NotFind = lazy(()=>import('./page/notfind'));
const My = lazy(()=>import('./page/my'))
const Shoping = lazy(()=>import('./page/shoping'))
const Cart = lazy(()=>import('./page/cart'))
const Footer = lazy(()=>import('./components/footer/footer'))



 function App(props) {
    const {history} = props
    return (
        <Suspense fallback={<Loading/>}>

          <Switch>
            <Route path="/" exact>
              <Redirect to="/home"/>
            </Route>
            <Route path="/home">
              <Home/>
            </Route>
            <Route path="/shop">
              <Shoping/>
            </Route>
            <Route path="/find">
              <Find/>
            </Route>
            <Route path="/cart">
              <Cart/>
            </Route>
            <Route path="/my">
              <My/>
            </Route>
            <Route path="/404">
              <NotFind/>
            </Route>
            <Route path="*">
              <Redirect to="/404"/>
            </Route>
          </Switch>
          {
            history.location.pathname==='/home'|| history.location.pathname==='/shop'||
            history.location.pathname==='/find'||
            history.location.pathname==='/cart'||
            history.location.pathname==='/my'
            ? <Footer/> : ''
          }
         
        </Suspense>
    )
  }

  export default withRouter(App)
  